<template>
    <el-button type="text" size="mini" @click.stop="handleTableDialog">
        词库管理
    </el-button>
    <!--列表数据-->
    <el-dialog v-model="dialogTableVisible" :title="dialogTableTitle" :append-to-body="true" top="5vh">
        <table-header :queryList="queryList" @pagination="getDataList" :rightColSpan="6" :leftColSpan="18">
            <template #filter>
                <el-input
                    placeholder="请输入词条"
                    :clearable="true"
                    @clear="handleKeywordClear"
                    size="small"
                    @keyup.enter="getDataList"
                    v-model="queryList.content"
                    style="width: 200px"
                />
            </template>
            <template #default>
                <el-button size="small" type="primary" style="margin-left: 10px" @click="getDataList">
                    搜索
                </el-button>
            </template>
            <template #operation>
                <el-button type="primary" size="small" @click="handleFormDialog">
                    <el-icon>
                        <plus />
                    </el-icon>
                    新建
                </el-button>
            </template>
        </table-header>
        <el-table border class="mt10 mb10" :data="cikuTableData.listData">
            <el-table-column property="date" prop="content" label="词条" :show-overflow-tooltip="true" />
            <el-table-column label="创建时间" align="center" prop="cts">
                <template #default="{row}">
                    {{row.ctime != null ? row.ctime.replace('T', ' ').replace('Z', '') : '-'}}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100px">
                <template #default="{row}">
                    <el-button type="text" size="mini" @click="handleEdit(row)">
                        编辑
                    </el-button>
                    <el-button type="text" size="mini" @click="handleDel(row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <table-pagination :queryList="queryList" :total="cikuTableData.total" @pagination="getDataList" />
    </el-dialog>
    <!--表单-->
    <el-dialog v-model="dialogFormVisible" :title="dialogFormTitle" :append-to-body="true" width="30%">
        <el-form :model="form" class="mt10" :rules="rules" ref="formRef">
            <el-form-item label="词条" :label-width="formLabelWidth" prop="content">
                <el-input v-model="form.content" placeholder="请输入词条" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="handleFormConfirm">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { reactive, ref, defineProps, computed } from 'vue'
import TableHeader from "@/views/public/TableHeader";
import TablePagination from "@/views/public/TablePagination";
import { Plus } from "@element-plus/icons";
import {
    getMediaCikus,
    createMediaCiku,
    updateMediaCiku,
    deleteMediaCiku,
    getMediaCiku
} from "@/api/media/ciku"
import { ElMessage, ElMessageBox } from 'element-plus'
const props = defineProps({
    row: {
        type: Object,
        required: true
    }
})


const dialogTableVisible = ref(false)
const handleTableDialog = () => {
    dialogTableVisible.value = true
    getDataList()
}
const dialogTableTitle = computed(
    () => {
        let titleLen = 10
        if (props.row.name.length > titleLen) {
            return '词库管理（' + (props.row.mediaid + '-' + props.row.name.slice(0, titleLen)) + '...）'
        } else {
            return '词库管理（' + (props.row.mediaid + '-' + props.row.name) + '）'
        }
    }
)
const queryList = reactive({
    page: 1,
    pagesize: 10,
    mediaid: props.row.mediaid,
    content: ''
})
const cikuTableData = reactive({
    total: 0,
    listData: []
})
const getDataList = () => {
    getMediaCikus(queryList).then(response => {
        if (response.errcode == 0){
            let { total, list } = response.data
            cikuTableData.total = total
            cikuTableData.listData = list
        }else{
            console.log(response)
        }
    })
}
const handleKeywordClear = () => {
    queryList.content = ''
    queryList.page = 1
    getDataList()
}

const dialogFormVisible = ref(false)
const dialogFormTitle = ref(null)
const handleFormDialog = () => {
    dialogFormVisible.value = true
    form.value.content = ''
    dialogFormTitle.value = '添加词条'
}
const form = ref({
    content: ''
})
const formRef = ref(null)
const rules = reactive({
    content: [
        { required: true, message: '请输入词条', trigger: 'blur' },
        { max: 50, message: "长度不能超过50", trigger: "change" }
    ],
})
const formLabelWidth = "60px"
const handleFormConfirm = () => {
    formRef.value.validate(valid => {
        if (valid) {
            let query = { mediaid: props.row.mediaid, content: form.value.content }
            if (dialogFormTitle.value == '修改词条' ){
                query['cikuid'] = form.value.cikuid
                updateMediaCiku(query).then(response => {
                    dialogFormVisible.value = false
                    if (response.errcode == 0) {
                        getDataList()
                        ElMessage({ type: 'success', message: '修改成功', duration: 2000 })
                    } else {
                        ElMessage({ type: 'warning', message: '修改失败', duration: 2000 })
                    }
                })
            }else{
                createMediaCiku(query).then(response => {
                    dialogFormVisible.value = false
                    if (response.errcode == 0) {
                        getDataList()
                        ElMessage({ type: 'success', message: '创建成功', duration: 2000 })
                    } else {
                        ElMessage({ type: 'warning', message: '创建失败', duration: 2000 })
                    }
                })
            }
        }
    })
}
const handleEdit = (rowData) => {
    dialogFormVisible.value = true
    form.value.content = ''
    dialogFormTitle.value = '修改词条'
    let query = { mediaid: props.row.mediaid, cikuid: rowData.cikuid }
    getMediaCiku( query ).then(response => {
        if( response.errcode == 0 ){
            form.value.content = response.data.content
            form.value.cikuid = response.data.cikuid
        }else{
            console.log(response)
        }
    })
}
const handleDel = (rowData) => {
    ElMessageBox.confirm("确定删除词条 <span style='color:#409EFF'>" + rowData.content + "</span> 吗？", '删除确认', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        let query = { mediaid: props.row.mediaid, cikuid: rowData.cikuid }
        deleteMediaCiku(query).then(response => {
            if (response.errcode == 0) {
                getDataList()
                ElMessage({ type: 'success', message: '删除成功', duration: 2000 })
            } else {
                ElMessage({ type: 'warning', message: '删除失败', duration: 2000 })
            }
        })
    })
}
/*import { defineProps, defineEmits } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { deleteMedia } from "@/api/media/media";

const props = defineProps({
    row: {
        type: Object,
        required: true
    }
})
const emit = defineEmits(['reloadLists'])
const handleDelete = () => {
    ElMessageBox.confirm(
        '确定删除 ' + props.row.name + ' 吗？',
        '媒资删除',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        deleteMedia({ mediaid: props.row.mediaid }).then(response => {
            if (response.errcode == 0) {
                ElMessage({ type: 'success', message: response.msg, duration: 2000 })
                emit('reloadLists')
            } else {
                console.log(response)
            }
        })
    }).catch((err) => {
        console.log(err)
    })
}
*/
</script>

<style scoped  lang="scss">
</style>